<template>
	<view class='warp'>
		<view class="home_top">
			<view class="back" @click="backClick">
				<view></view>
			</view>
			<view class="title" style="font-size: 36rpx;">邀请好友</view>
		</view>
		<view class="share"  @click="share"></view>
		<view class="activeRule" @click="topage">活动详细规则</view>
		<uni-popup ref="sharepopup" type="bottom">
			<share-btn :sharedataTemp="sharedata"></share-btn>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../../components/uni-popup/uni-popup.vue';
	import shareBtn from '../../../components/share-btn/share-btn.vue';
	export default {
		components: {
			uniPopup,
			shareBtn
		},
		data() {
			return {
				userInfo: {},
				word:"",
				sharedata: {
					strShareUrl: "",
					strShareTitle: "",
					strShareSummary: "",
					strShareImageUrl: "",
				},
			}

		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
			let type =uni.getStorageSync('userType')
			if(type == 1){
				this.word = '专业安装维修师傅，自由选择，公开定价，合理收费，方便快捷，省心省钱！'
			}else{
				this.word = '上万家餐饮用户，注册即有订单，有手艺就有收益！'
			}
		},

		//用户点击右上角分享朋友圈
		onShareTimeline: function(res) {
			let that = this
			console.log(res,'分享朋友圈')
			wx.showShareMenu({
				withShareTicket: true,
				menus: [ 'shareTimeline']
			})
			return {
				title:that.word,
				query: {
					uid: this.userInfo.uid
				},
				imageUrl:''
			}
		},

		onShareAppMessage(options) {
			console.log(options,'分享用户1')
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			})
			var that = this;
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: that.word, // 默认是小程序的名称(可以写slogan等)
				path: `/pages/login/index?uid=${this.userInfo.uid}`, // 默认是当前页面，必须是以‘/'开头的完整路径
				imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: function(res) {
					console.log('分享成功!',res)
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {
						console.log('分享成功!',res)
					}
				},
				fail: function(res) {
					console.log('分享成功!',res)
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},

			};
			// 来自页面内的按钮的转发
			
			// 返回shareObj
			return shareObj;
		},
		methods: {
			backClick() { // 返回上一级
				uni.navigateBack({
					delta: 1
				});
			},
			// 分享
			share() {
				this.$refs.sharepopup.open();
			},
			topage() {
				uni.navigateTo({
					url: '/pages/users/userrule/index'
				})
			}
		}

	}
</script>

<style scoped lang='less'>
	.home_top {
		/* padding-left: -25px; */
		/* background-image: url(../../../static/yqhybg.png); */
		background-size: 100% 100%;
		width: 750upx;
		height: 365upx;
		box-sizing: border-box;
		padding-top: 104upx;
		position: relative;
		top: -38%;
		text-align: center;
	
		>.title {
			font-size: 40upx;
			color: #fff;
			line-height: 1;
		}
	
		.back {
			width: 50upx;
			height: 50upx;
			position: absolute;
			left: 30upx;
			top: 104upx;
	
			view {
				width: 30upx;
				height: 30upx;
				border-left: 2px solid #fff;
				border-top: 2px solid #fff;
				transform: rotate(-45deg);
			}
		}
	
		.tips {
			display: flex;
			align-items: center;
			position: absolute;
			right: 30upx;
			top: 96upx;
	
			image {
				width: 48upx;
				height: 48upx;
			}
	
			text {
				color: #fff;
				font-size: 24upx;
				margin-left: 1upx;
			}
		}
	}
	.warp {
		background-image: url('https://ligao.schainbaas.com/uploads/attach/2022/02/20220222/20220223145212.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		align-items: center;

		.share {
			width: 250rpx;
			height: 70rpx;
			/* background-color: #FFFFFF; */
			position: absolute;
			left: 50%;
			top: 43%;
			transform: translateX(-50%);
		}

		.activeRule {
			color: #FFFFFF;
			font-size: 24rpx;
			/* width: 100%; */
			text-align: center;
			/* border-bottom-width: 1rpx; */
			border-bottom: 1rpx solid #FFFFFF;
			position: absolute;
			top:50%;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
